@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);


* { margin: 0 auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img { border: 0; max-width: 100%; }
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
body { background: #FFF; font-family:  'Nanum Gothic', Tahoma,'Jeju Gothic',"Malgun Gothic", Qrial, sans-serif;  }




#wrap {
width: 1200px;
margin: 0 auto;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #FFF;
}




/* #header */
#header {
width: 100%;
}


#m_top{
display:none;
width:100%;
height: 5px; 
background:#333;
}


#logo {
width: 100%;
background: #333;
}


#logo2 {
display: none; 
width: 100%; 
overflow: hidden; 
background:#FFF; 
margin-top:10px;
}


.logo2_button {
float: left; 
width:20%; 
margin:top 0; 
text-align:center; 
} 


.logo2_text {
float: left; 
width: 60%; 
left: 0 ;
}


.logo2_tel {
float: left; 
width:20%; 
margin:top 0; 
text-align:center; 
} 




#top_tel{
width: 100%;
height: 60px;
margin-top: 20px;
margin: 0 auto;
background:#ffeb3b;
line-height:60px;
text-align:center;
}


#top_tel a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: normal;
font-style: normal;
line-height:60px;
height: 60px;
line-height:60px;
}


#top_tel a span{
font-weight: bold; color:#000; font-size: 2em; 
}


#nav {
background:#000;
width: 100%;
}


#nav ul { overflow: hidden; }
#nav ul li { float: left; height:80px; width: 240px;}
#nav ul li a {
display: block;
line-height:80px;
font-size: 2em; /* 18 / 16 */
color: #FFF;
background:#006666;
text-align: center;
}
#nav ul li a:hover {
color: #FFF;
background: #333;
}


#s_nav { 
display: block; 
width: 240px; 
height: 100%; 
margin: 0 auto; 
padding-top: 20px;
position: absolute;
z-index: 999;
top: 0;
left:-300px; 
background:#000;
}


.snav_no {
text-align: right; 
margin-right: 5px; 
}


h1 { 
font-size: 1.250em; 
line-height: 1.7em;
margin-bottom: 20px; 
font-weight: bold; 
letter-spacing: -0.03em;
color: #FFFFFF;
text-shadow:1px 1px 1px rgb(0,0,0); behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');
text-align: center;
}


#snav {
display: block;
}


#snav>ul{ 
width: 234px;
margin: 0 auto; 
}


#snav > ul>li{
height:30px;
border-bottom: 1px solid #BDBDBD; 
background:#333;
}


#snav >ul> li > a { 
display: block;
line-height: 30px;
padding-left: 18px; 
font-size: 1em; 
color: #FFF; 
text-decoration: none;
}


#full {
width: 100%; 
height: 100%;
position: absolute; 
top: 0;
left: 0;
z-index: 800;
background: transparent; 
display:none;
}








/* #contents */


#img_box {
position: relative;
}
#contents {
width: 100%;
margin: 0 auto;
}


#title_top{
width: 100%; 
height: 100px;
margin: 0 auto;
}


.title_top{
text-align: center;
font-size: 3em;
color: #000;
font-weight: bold;
font-style: normal;
line-height: 100px;
}




#title{
width: 100%; 
height: 100px;
margin: 0 auto;
margin-top:5px;
background: #006666;
}
.title{
text-align: center;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
line-height: 100px;
}
#content_img{
width: 100%; 
margin: 0 auto;
margin-top:5px;
background: #FFF;
text-align:center;
}
#content_img img{
margin-top:5px;
}




/*main-contents*/


#mainbn1{ 
width: 100%; 
overflow: hidden; 
margin-top:30px; 
margin-bottom: 10px; 
background:#FFF;
text-align:center;
}


#main-left1{
width:30%; 
float: left;
margin-left: 2.5%; 
margin-right:1.25%; 
}


#main-center1{
width:30%; 
float: left;
margin-left: 1.25%; 
margin-right: 1.25%; 
}


#main-right1{
width:30%; 
float: left; 
margin-left: 1.25%; 
margin-right: 2.5%; 
}




#main-title1{ 
text-align:center;
 float: none;
width: 100%; 
height: 100px;
}


#main-title1 a{ 
text-align: center;
line-height:100px;
font-size: 3em;
color: #000;
font-weight: bold;
font-style: normal;
}


#main-content_img1 {
 float: none;
width:100%;
}




#mainbn{ 
width: 100%; 
overflow: hidden; 
margin-top:30px; 
background:#F2FFED;
text-align:center;
}


#main-left{
width:40%;
float: left; 
margin-left: 7.5%; 
margin-right:2.5%;
margin-top:30px; 
}


#main-right{
width:40%;
float: left; 
margin-left: 2.5%; 
margin-right:7.5%; 
margin-top:30px; 
}


#main-title{ 
text-align:center;
 float: none;
width: 100%; 
height: 100px;
}


#main-title a{ 
text-align: center;
line-height:100px;
font-size: 3em;
color: #000;
font-weight: bold;
font-style: normal;
}


#main-content_img{
 float: none;
width:100%;
}






/*#community*/
#community{
top:150px; 
right:350px;
width: 100%;   
margin:0 auto;
clear: both;
}




#footer {
padding: 10px 0;
text-align: center;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
margin: 0 auto;
line-height:60px;
text-align:center;
}
.footer a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: normal;
font-style: normal;
padding: 10px;
height: 60px;
line-height:60px;
}




@media screen and (max-width:1024px) {
#wrap { width: 100%; border-left: none; border-right: none; }
#nav ul li { width: 20%; }
#nav ul li a {width: 100%;}
#top_tel a{font-size: 1.5em;}
#top_tel a span{font-size: 1.5em; }
}






@media screen and (max-width:768px) {
#img_box {  }
#text_box { top: 40px; right: 45px; }
.text_box3 { display: none; }
#title{height:auto;}
.title{font-size: 1.5em; margin: 5 0 5 0;}
#text_box { top: 40px; right: 45px; }
.text_box3 { display: none; }
#main-title1 a{font-size: 1em;line-height: none; height: auto;}
#main-title1{ height: auto;}
#main-title a{font-size: 1em; line-height: none; height: auto; }
#main-title{ height: auto;}
}




@media screen and (max-width:550px) {
#logo{display:none;}
#logo2{display:block;}
#top_tel a{font-size: 1em;}
#top_tel a span{font-size: 1.5em; }
#nav {display:none;}
#mainbn{ width: 100%; margin-top:15px; }
}